<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直播销售客服中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .chat-bubble-right {
                border-radius: 18px 18px 4px 18px;
            }
            .chat-bubble-left {
                border-radius: 18px 18px 18px 4px;
            }
            .message-appear {
                animation: fadeIn 0.3s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-headphones text-primary text-xl"></i>
                <h1 class="text-xl font-bold text-primary">直播销售客服中心</h1>
            </div>
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="搜索问题..." class="pl-9 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all w-48 md:w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <div class="relative">
                    <button class="relative p-2 rounded-full hover:bg-gray-100 transition-colors">
                        <i class="fa fa-bell-o text-gray-600"></i>
                        <span class="absolute top-0 right-0 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                </div>
                <div class="flex items-center space-x-2">
                    <img src="https://picsum.photos/id/1005/200/200" alt="客服头像" class="w-8 h-8 rounded-full object-cover">
                    <span class="hidden md:inline font-medium">客服小助手</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6">
        <!-- 左侧边栏 -->
        <aside class="w-full lg:w-80 bg-white rounded-xl shadow-sm overflow-hidden flex flex-col h-[calc(100vh-100px)]">
            <!-- 搜索和筛选 -->
            <div class="p-4 border-b border-gray-100">
                <div class="relative">
                    <input type="text" placeholder="搜索客户..." class="w-full pl-9 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <div class="flex justify-between mt-3">
                    <button class="px-3 py-1 text-sm rounded-full bg-primary/10 text-primary flex items-center space-x-1">
                        <i class="fa fa-filter"></i>
                        <span>筛选</span>
                    </button>
                    <div class="flex space-x-1">
                        <button class="p-1.5 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors">
                            <i class="fa fa-th-large text-gray-600"></i>
                        </button>
                        <button class="p-1.5 rounded-lg bg-primary/10 text-primary">
                            <i class="fa fa-list text-primary"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 会话列表 -->
            <div class="overflow-y-auto scrollbar-hide flex-grow">
                <div class="p-3 text-xs uppercase text-gray-500 font-medium">进行中的会话</div>
                <div class="divide-y divide-gray-100">
                    <!-- 活跃会话 -->
                    <div class="p-3 bg-primary/5 border-l-4 border-primary hover:bg-primary/10 transition-colors cursor-pointer">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="relative">
                                    <img src="https://picsum.photos/id/1027/200/200" alt="客户头像" class="w-10 h-10 rounded-full object-cover">
                                    <span class="absolute bottom-0 right-0 w-3 h-3 bg-success border-2 border-white rounded-full"></span>
                                </div>
                                <div>
                                    <h3 class="font-medium">李明</h3>
                                    <p class="text-sm text-gray-600 truncate w-40">这款产品还有货吗？我想马上下单</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="text-xs text-gray-500">10:23</span>
                                <div class="mt-1 bg-primary text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">2</div>
                            </div>
                        </div>
                    </div>

                    <!-- 其他会话 -->
                    <div class="p-3 hover:bg-gray-50 transition-colors cursor-pointer">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="relative">
                                    <img src="https://picsum.photos/id/1012/200/200" alt="客户头像" class="w-10 h-10 rounded-full object-cover">
                                    <span class="absolute bottom-0 right-0 w-3 h-3 bg-success border-2 border-white rounded-full"></span>
                                </div>
                                <div>
                                    <h3 class="font-medium">王小红</h3>
                                    <p class="text-sm text-gray-500 truncate w-40">请问支持分期付款吗？</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="text-xs text-gray-500">09:47</span>
                            </div>
                        </div>
                    </div>

                    <div class="p-3 hover:bg-gray-50 transition-colors cursor-pointer">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="relative">
                                    <img src="https://picsum.photos/id/1025/200/200" alt="客户头像" class="w-10 h-10 rounded-full object-cover">
                                    <span class="absolute bottom-0 right-0 w-3 h-3 bg-gray-300 border-2 border-white rounded-full"></span>
                                </div>
                                <div>
                                    <h3 class="font-medium">张伟</h3>
                                    <p class="text-sm text-gray-500 truncate w-40">已收到货，非常满意！</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="text-xs text-gray-500">昨天</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="p-3 text-xs uppercase text-gray-500 font-medium mt-4">历史会话</div>
                <div class="divide-y divide-gray-100">
                    <div class="p-3 hover:bg-gray-50 transition-colors cursor-pointer">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="relative">
                                    <img src="https://picsum.photos/id/1066/200/200" alt="客户头像" class="w-10 h-10 rounded-full object-cover">
                                    <span class="absolute bottom-0 right-0 w-3 h-3 bg-gray-300 border-2 border-white rounded-full"></span>
                                </div>
                                <div>
                                    <h3 class="font-medium">刘芳</h3>
                                    <p class="text-sm text-gray-500 truncate w-40">谢谢解答，我已经了解了</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="text-xs text-gray-500">周一</span>
                            </div>
                        </div>
                    </div>

                    <div class="p-3 hover:bg-gray-50 transition-colors cursor-pointer">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="relative">
                                    <img src="https://picsum.photos/id/1074/200/200" alt="客户头像" class="w-10 h-10 rounded-full object-cover">
                                    <span class="absolute bottom-0 right-0 w-3 h-3 bg-gray-300 border-2 border-white rounded-full"></span>
                                </div>
                                <div>
                                    <h3 class="font-medium">赵强</h3>
                                    <p class="text-sm text-gray-500 truncate w-40">申请退货，请协助处理</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="text-xs text-gray-500">上周</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 中间聊天区域 -->
        <section class="flex-grow bg-white rounded-xl shadow-sm overflow-hidden flex flex-col h-[calc(100vh-100px)]">
            <!-- 聊天头部 -->
            <div class="p-4 border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1027/200/200" alt="李明头像" class="w-10 h-10 rounded-full object-cover">
                        <span class="absolute bottom-0 right-0 w-3 h-3 bg-success border-2 border-white rounded-full"></span>
                    </div>
                    <div>
                        <h2 class="font-semibold">李明</h2>
                        <p class="text-xs text-success">正在直播中 · 已观看2小时15分钟</p>
                    </div>
                </div>
                <div class="flex items-center space-x-2">
                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors" title="发送商品链接">
                        <i class="fa fa-shopping-bag text-gray-600"></i>
                    </button>
                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors" title="发送优惠券">
                        <i class="fa fa-ticket text-gray-600"></i>
                    </button>
                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors" title="转接">
                        <i class="fa fa-exchange text-gray-600"></i>
                    </button>
                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors" title="结束会话">
                        <i class="fa fa-times text-gray-600"></i>
                    </button>
                </div>
            </div>

            <!-- 聊天内容 -->
            <div class="flex-grow p-4 overflow-y-auto scrollbar-hide" id="chat-messages">
                <!-- 系统消息 --><!-- 系统消息 -->
                <div class="flex justify-center my-4">
                    <span class="text-xs bg-gray-100 text-gray-500 px-3 py-1 rounded-full">今天 10:00</span>
                </div>

                <!-- 客服消息 -->
                <div class="flex items-end mb-4 message-appear">
                    <img src="https://picsum.photos/id/1005/200/200" alt="客服头像" class="w-8 h-8 rounded-full object-cover mr-2">
                    <div class="max-w-[80%]">
                        <div class="bg-gray-100 p-3 rounded-lg chat-bubble-left">
                            <p>您好，欢迎来到直播间！我是客服小助手，有什么可以帮您的吗？</p>
                        </div>
                        <span class="text-xs text-gray-400 ml-2">10:00</span>
                    </div>
                </div>

                <!-- 客户消息 -->
                <div class="flex items-end justify-end mb-4 message-appear">
                    <div class="max-w-[80%] text-right">
                        <div class="bg-primary text-white p-3 rounded-lg chat-bubble-right">
                            <p>你好，我想了解一下这款新款手机的具体参数</p>
                        </div>
                        <span class="text-xs text-gray-400 mr-2">10:02</span>
                    </div>
                    <img src="https://picsum.photos/id/1027/200/200" alt="客户头像" class="w-8 h-8 rounded-full object-cover ml-2">
                </div>

                <!-- 客服消息 -->
                <div class="flex items-end mb-4 message-appear">
                    <img src="https://picsum.photos/id/1005/200/200" alt="客服头像" class="w-8 h-8 rounded-full object-cover mr-2">
                    <div class="max-w-[80%]">
                        <div class="bg-gray-100 p-3 rounded-lg chat-bubble-left">
                            <p>这款手机采用了最新的处理器，6.7英寸屏幕，支持120Hz高刷新率，5000mAh电池，支持65W快充，后置三摄，主摄达到了一亿像素。</p>
                        </div>
                        <span class="text-xs text-gray-400 ml-2">10:05</span>
                    </div>
                </div>

                <!-- 客户消息 -->
                <div class="flex items-end justify-end mb-4 message-appear">
                    <div class="max-w-[80%] text-right">
                        <div class="bg-primary text-white p-3 rounded-lg chat-bubble-right">
                            <p>请问这款产品还有货吗？我想马上下单</p>
                        </div>
                        <span class="text-xs text-gray-400 mr-2">10:23</span>
                    </div>
                    <img src="https://picsum.photos/id/1027/200/200" alt="客户头像" class="w-8 h-8 rounded-full object-cover ml-2">
                </div>

                <!-- 正在输入提示 -->
                <div class="flex items-end mb-4 opacity-70 message-appear">
                    <img src="https://picsum.photos/id/1005/200/200" alt="客服头像" class="w-8 h-8 rounded-full object-cover mr-2">
                    <div class="bg-gray-100 p-3 rounded-lg chat-bubble-left">
                        <div class="flex space-x-1">
                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 输入区域 -->
            <div class="p-4 border-t border-gray-100">
                <div class="flex items-center space-x-2 mb-2">
                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors" title="表情">
                        <i class="fa fa-smile-o text-gray-600"></i>
                    </button>
                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors" title="图片">
                        <i class="fa fa-picture-o text-gray-600"></i>
                    </button>
                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors" title="文件">
                        <i class="fa fa-file-o text-gray-600"></i>
                    </button>
                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors" title="快捷回复">
                        <i class="fa fa-magic text-gray-600"></i>
                    </button>
                </div>
                <div class="relative">
                    <textarea id="message-input" placeholder="输入回复内容..." class="w-full p-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all resize-none h-16"></textarea>
                    <button id="send-button" class="absolute right-3 bottom-3 bg-primary hover:bg-primary/90 text-white px-4 py-1.5 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                        发送
                    </button>
                </div>
                <div class="flex justify-between mt-2 text-xs text-gray-500">
                    <div>按Enter发送消息，Shift+Enter换行</div>
                    <div>快捷回复: F1-F5</div>
                </div>
            </div>
        </section>

        <!-- 右侧信息面板 -->
        <aside class="hidden xl:block w-80 bg-white rounded-xl shadow-sm overflow-hidden flex flex-col h-[calc(100vh-100px)]">
            <!-- 客户信息 -->
            <div class="p-4 border-b border-gray-100">
                <h3 class="font-semibold mb-3">客户信息</h3>
                <div class="flex items-center space-x-3 mb-4">
                    <img src="https://picsum.photos/id/1027/200/200" alt="李明头像" class="w-14 h-14 rounded-full object-cover">
                    <div>
                        <h4 class="font-medium">李明</h4>
                        <div class="flex items-center mt-1">
                            <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">VIP客户</span>
                            <span class="text-xs text-gray-500 ml-2">会员等级: 钻石</span>
                        </div>
                    </div>
                </div>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500">注册时间:</span>
                        <span>2023-05-15</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">累计消费:</span>
                        <span>¥12,560.00</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">上次购买:</span>
                        <span>2025-06-02</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">关注商品:</span>
                        <span>12件</span>
                    </div>
                </div>
            </div>

            <!-- 快捷回复 -->
            <div class="p-4 border-b border-gray-100">
                <h3 class="font-semibold mb-3">快捷回复</h3>
                <div class="grid grid-cols-2 gap-2">
                    <button class="text-sm bg-gray-100 hover:bg-gray-200 transition-colors p-2 rounded-lg text-left truncate">
                        您好，这款产品目前库存充足，可以直接下单
                    </button>
                    <button class="text-sm bg-gray-100 hover:bg-gray-200 transition-colors p-2 rounded-lg text-left truncate">
                        我们支持7天无理由退换货
                    </button>
                    <button class="text-sm bg-gray-100 hover:bg-gray-200 transition-colors p-2 rounded-lg text-left truncate">
                        您可以在订单详情页查看物流信息
                    </button>
                    <button class="text-sm bg-gray-100 hover:bg-gray-200 transition-colors p-2 rounded-lg text-left truncate">
                        请稍等，我帮您查询一下
                    </button>
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="p-4 border-b border-gray-100">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-semibold">相关商品</h3>
                    <button class="text-xs text-primary hover:underline">查看全部</button>
                </div>
                <div class="space-y-3">
                    <div class="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded-lg transition-colors cursor-pointer">
                        <img src="https://picsum.photos/id/96/300/300" alt="手机" class="w-16 h-16 object-cover rounded-lg">
                        <div class="flex-grow">
                            <h4 class="font-medium text-sm truncate">2025款旗舰智能手机</h4>
                            <div class="flex items-center mt-1">
                                <span class="text-primary font-semibold">¥4,999</span>
                                <span class="text-xs text-gray-500 line-through ml-2">¥5,999</span>
                            </div>
                            <div class="flex items-center mt-1">
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star-half-o text-warning text-xs"></i>
                                </div>
                                <span class="text-xs text-gray-500 ml-1">(4.5)</span>
                            </div>
                        </div>
                        <button class="text-primary">
                            <i class="fa fa-paper-plane-o"></i>
                        </button>
                    </div>

                    <div class="flex items-center space-x-3 p-2 hover:bg-gray-50 rounded-lg transition-colors cursor-pointer">
                        <img src="https://picsum.photos/id/160/300/300" alt="手机壳" class="w-16 h-16 object-cover rounded-lg">
                        <div class="flex-grow">
                            <h4 class="font-medium text-sm truncate">透明硅胶手机保护壳</h4>
                            <div class="flex items-center mt-1">
                                <span class="text-primary font-semibold">¥59</span>
                            </div>
                            <div class="flex items-center mt-1">
                                <div class="flex">
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star text-warning text-xs"></i>
                                    <i class="fa fa-star-o text-warning text-xs"></i>
                                </div>
                                <span class="text-xs text-gray-500 ml-1">(4.0)</span>
                            </div>
                        </div>
                        <button class="text-primary">
                            <i class="fa fa-paper-plane-o"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 会话记录 -->
            <div class="p-4 flex-grow overflow-y-auto scrollbar-hide">
                <h3 class="font-semibold mb-3">历史会话</h3>
                <div class="space-y-3">
                    <div class="p-2 bg-gray-50 rounded-lg">
                        <div class="flex justify-between text-xs text-gray-500 mb-1">
                            <span>2025-06-02</span>
                            <span>订单咨询</span>
                        </div>
                        <p class="text-sm">客户咨询了订单状态和物流信息，已告知客户可以在APP中查看实时物流</p>
                    </div>

                    <div class="p-2 bg-gray-50 rounded-lg">
                        <div class="flex justify-between text-xs text-gray-500 mb-1">
                            <span>2025-05-18</span>
                            <span>产品咨询</span>
                        </div>
                        <p class="text-sm">客户咨询了手机电池续航问题，已详细解答并提供了使用建议</p>
                    </div>

                    <div class="p-2 bg-gray-50 rounded-lg">
                        <div class="flex justify-between text-xs text-gray-500 mb-1">
                            <span>2025-04-30</span>
                            <span>购买咨询</span>
                        </div>
                        <p class="text-sm">客户咨询了手机性能和配置，推荐了旗舰机型并发送了产品链接</p>
                    </div>
                </div>
            </div>
        </aside>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>© 2025 直播销售客服系统 | 客服工作时间: 9:00-22:00</p>
        </div>
    </footer>

    <script>
        // 消息发送功能
        document.addEventListener('DOMContentLoaded', function() {
            const messageInput = document.getElementById('message-input');
            const sendButton = document.getElementById('send-button');
            const chatMessages = document.getElementById('chat-messages');
            
            // 禁用发送按钮直到有内容
            messageInput.addEventListener('input', function() {
                sendButton.disabled = !this.value.trim();
            });
            
            // 发送消息
            function sendMessage() {
                const message = messageInput.value.trim();
                if (!message) return;
                
                // 添加用户消息到聊天窗口
                const userMessageHTML = `
                    <div class="flex items-end justify-end mb-4 message-appear">
                        <div class="max-w-[80%] text-right">
                            <div class="bg-primary text-white p-3 rounded-lg chat-bubble-right">
                                <p>${message}</p>
                            </div>
                            <span class="text-xs text-gray-400 mr-2">${new Date().getHours()}:${String(new Date().getMinutes()).padStart(2, '0')}</span>
                        </div>
                        <img src="https://picsum.photos/id/1005/200/200" alt="客服头像" class="w-8 h-8 rounded-full object-cover ml-2">
                    </div>
                `;
                
                chatMessages.insertAdjacentHTML('beforeend', userMessageHTML);
                
                // 清空输入框
                messageInput.value = '';
                sendButton.disabled = true;
                
                // 滚动到底部
                chatMessages.scrollTop = chatMessages.scrollHeight;
                
                // 模拟回复
                setTimeout(() => {
                    // 移除"正在输入"提示
                    const typingIndicator = chatMessages.querySelector('.opacity-70');
                    if (typingIndicator) {
                        typingIndicator.remove();
                    }
                    
                    // 添加回复
                    const replies = [
                        "感谢您的咨询，这款产品目前库存充足，您可以放心下单购买。",
                        "您好，我们的客服团队将尽快为您处理，请稍作等待。",
                        "这款产品的特点是...，非常适合您的需求。",
                        "感谢您的耐心等待，您的问题我已经记录下来，会有专门的团队为您解决。",
                        "您好，这款产品支持7天无理由退换货，请您放心购买。"
                    ];
                    
                    const randomReply = replies[Math.floor(Math.random() * replies.length)];
                    
                    const replyHTML = `
                        <div class="flex items-end mb-4 message-appear">
                            <img src="https://picsum.photos/id/1005/200/200" alt="客服头像" class="w-8 h-8 rounded-full object-cover mr-2">
                            <div class="max-w-[80%]">
                                <div class="bg-gray-100 p-3 rounded-lg chat-bubble-left">
                                    <p>${randomReply}</p>
                                </div>
                                <span class="text-xs text-gray-400 ml-2">${new Date().getHours()}:${String(new Date().getMinutes()).padStart(2, '0')}</span>
                            </div>
                        </div>
                    `;
                    
                    chatMessages.insertAdjacentHTML('beforeend', replyHTML);
                    chatMessages.scrollTop = chatMessages.scrollHeight;
                }, 1500);
                
                // 添加"正在输入"提示
                const typingHTML = `
                    <div class="flex items-end mb-4 opacity-70 message-appear">
                        <img src="https://picsum.photos/id/1005/200/200" alt="客服头像" class="w-8 h-8 rounded-full object-cover mr-2">
                        <div class="bg-gray-100 p-3 rounded-lg chat-bubble-left">
                            <div class="flex space-x-1">
                                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
                            </div>
                        </div>
                    </div>
                `;
                
                chatMessages.insertAdjacentHTML('beforeend', typingHTML);
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
            
            // 点击发送按钮
            sendButton.addEventListener('click', sendMessage);
            
            // 按Enter发送消息，Shift+Enter换行
            messageInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
            
            // 快捷回复按钮点击事件
            const quickReplyButtons = document.querySelectorAll('.grid.grid-cols-2 button');
            quickReplyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    messageInput.value = this.textContent;
                    sendButton.disabled = false;
                });
            });
            
            // 模拟消息通知
            setTimeout(() => {
                const notificationSound = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YYICAAAA');
                notificationSound.volume = 0.2;
                notificationSound.play().catch(e => console.log('播放通知声音失败:', e));
                
                const notificationHTML = `
                    <div class="fixed bottom-4 right-4 bg-white shadow-lg rounded-lg p-4 z-50 transform transition-all duration-300 translate-y-0" id="notification">
                        <div class="flex items-start space-x-3">
                            <div class="bg-primary/10 p-2 rounded-full">
                                <i class="fa fa-comment text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">新消息通知</h4>
                                <p class="text-sm text-gray-600">王小红有新消息，请及时查看</p>
                            </div>
                            <button class="text-gray-400 hover:text-gray-600" onclick="document.getElementById('notification').classList.add('translate-y-full')">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                `;
                
                document.body.insertAdjacentHTML('beforeend', notificationHTML);
                
                // 5秒后自动关闭通知
                setTimeout(() => {
                    const notification = document.getElementById('notification');
                    if (notification) {
                        notification.classList.add('translate-y-full');
                    }
                }, 5000);
            }, 10000);
        });
    </script>
</body>
</html>
    